<template>
    <div style="background-color: #f0f2f5; padding-bottom: 20px;" ref="container">
        <a-row :gutter="16">
            <a-col :span="8" class="card-container">
                <img class="collapsed" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" alt="">
                <a-card title="商品总览" class="card">
                    <p>card content</p>
                </a-card>
            </a-col>
            <a-col :span="8" class="card-container">
                <img class="collapsed" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" alt="">
                <a-card title="用户总览" class="card">
                    <p>card content</p>
                </a-card>
            </a-col>
            <a-col :span="8" class="card-container">
                <img class="collapsed" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" alt="">
                <a-card title="销售总览" class="card">
                    <p>card content</p>
                </a-card>
            </a-col>
        </a-row>
    </div>
</template>

<script>
export default {
  mounted() {
    this.ob = new ResizeObserver((entries) => {
      entries.forEach((entry) => {
        entry.target.firstElementChild.classList[
          entry.contentRect.width < 460 ? 'add' : 'remove'
        ]('collapsed');
      });
    });
    this.cards = this.$refs.container.querySelectorAll('.card-container');
    this.cards.forEach((c) => {
      this.ob.observe(c);
    });
  },
  beforeDestroy() {
    this.cards.forEach((c) => {
      this.ob.unobserve(c);
    });
  },
};
</script>

<style lang="less" scoped>
.card-container {
    display: flex;

    img {
        width: 260px;
        height: 160px;
        object-fit: cover;
        transition: width .3s ease;

        &.collapsed {
            width: 0;
        }
    }

    .card {
        flex-grow: 1;

        p {
            text-indent: 5em;
        }
    }
}
</style>
